import React, { useState } from 'react';
import { Form, Radio, message, Space, Typography, Collapse } from 'antd';
import { FormInstance } from 'antd/lib/form';

interface Option {
    label: string;
    value: string;
}

interface OptionGroup {
    groupName: string; // 选项组名称
    options: Option[]; // 选项数组
}

interface QuestionProps {
    questionNumber: number; // 问题序号
    question: string; // 问题
    optionGroups: OptionGroup[]; // 选项组数组
    correctAnswers: { [key: string]: string }; // 正确答案对象
    explanation: string; // 答案解析
    direction?: 'horizontal' | 'vertical'; // 选项排列方向，默认为垂直
}

const { Panel } = Collapse;
const { Title, Text } = Typography;

const QuestionComponent: React.FC<QuestionProps> = ({
                                                        questionNumber,
                                                        question,
                                                        optionGroups,
                                                        correctAnswers,
                                                        explanation='',
                                                        direction = 'horizontal', // 默认为垂直排列
                                                    }) => {
    const [form] = Form.useForm();
    const [showExplanation, setShowExplanation] = useState(false);

    const checkAnswer = (groupName: string, selectedValue: string) => {
        if (selectedValue === correctAnswers[groupName]) {
            message.success(`${groupName} 回答正确！`);
        } else {
            message.error(`${groupName} 回答错误，请再试一次。`);
        }

        // 检查所有选项是否都已回答正确
        let allCorrect = true;
        for (const key in correctAnswers) {
            if (form.getFieldValue(key) !== correctAnswers[key]) {
                allCorrect = false;
                break;
            }
        }

        if (allCorrect) {
            setShowExplanation(true); // 显示答案解析
        }
    };

    return (
        <div style={{ display: 'flex', padding: '20px', borderRadius: '8px' }}>
            <div style={{ width: '40px', textAlign: 'right', marginRight: '10px' }}>
                <Title level={4}>{questionNumber}.</Title>
            </div>
            <div style={{ flex: 1, paddingLeft: '7px' }}>
                <Title level={4} style={{ marginBottom: 10 }}>{question}</Title>

                <Form
                    form={form}
                    name="question-form"
                    initialValues={{ remember: true }}
                >
                    {optionGroups.map((group, index) => (
                        <React.Fragment key={index}>
                            <Title level={5} style={{ marginTop: 20, marginBottom: 10 }}>{group.groupName}</Title>
                            <Form.Item name={group.groupName}>
                                <Radio.Group onChange={(e) => checkAnswer(group.groupName, e.target.value)}>
                                    <Space direction={direction} size="middle" style={{ width: '100%' }}>
                                        {group.options.map((option, idx) => (
                                            <Radio key={idx} value={option.value}>
                                                {`${String.fromCharCode(65 + idx)}. ${option.label}`}
                                            </Radio>
                                        ))}
                                    </Space>
                                </Radio.Group>
                            </Form.Item>
                        </React.Fragment>
                    ))}
                </Form>

                {showExplanation&& explanation && (
                    <Collapse defaultActiveKey={['1']} style={{ marginTop: 20 }}>
                        <Panel header="答案解析" key="1">
                            <Text>{explanation}</Text>
                        </Panel>
                    </Collapse>
                )}
            </div>
        </div>
    );
};

export default QuestionComponent;
